<template>
  <div class="allTop">
    <el-dialog
      title="出库"
      :visible.sync="visible"
      @close="close"
      :show="show"
      width="800px"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :inline="true"
          :model="ruleForm"
          class="demo-form-inline"
          :rules="rules"
          ref="ruleForm"
        >
          <div
            style="font-weight:700;font-size:20px;margin-left:20px;padding-bottom:10px"
          >
            出库单
          </div>
          <div>
            <el-form-item label="农资名称：">
              <span>{{ nzNameout }}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="出库批次：">
              <el-input
                v-model="ruleForm.outBatchCode"
                placeholder=""
              ></el-input>
            </el-form-item>

            <el-form-item label="出库人" prop="personId">
              <el-select v-model="ruleForm.personId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="规格：">
              <span>{{ nzgg }}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="数量：" prop="qty">
              <el-input
                placeholder="请填写数量"
                v-model="ruleForm.stockGoodsOutDetailList[0].qty"
                @change="changeInput"
              ></el-input>
            </el-form-item>
            <span>袋</span>
            <span>(最大可用：{{ topNum }})</span>
          </div>
          <div>
            <el-form-item label="入库单价：" prop="price">
              <el-input
                placeholder="请填写单价"
                v-model="ruleForm.stockGoodsOutDetailList[0].price"
                @change="changeInput_0"
              ></el-input>
            </el-form-item>
            <span>分</span>
          </div>
          <div>
            <el-form-item label="总计：">
              <span style="color:red;font-weight:700;font-size:18px">{{
                allNum
              }}</span>
              <span>元</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="出库原因：" prop="reason">
              <el-select v-model="ruleForm.reason" placeholder="请选择">
                <el-option
                  v-for="item in excuse"
                  :key="item.dictSort"
                  :label="item.dictLabel"
                  :value="item.dictSort"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="ruleForm.remark"
                :autosize="{ minRows: 2, maxRows: 4 }"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          @click="complete"
          style="    color: #fff;
    background-color: #11C26D;
    border-color: #11C26D;"
          >完 成</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  querynzOutnum,
  queryUser,
  querynzmodify,
  querynzOut
} from "@/api/manage";
import { dictionariesCheck } from "@/api/dictionaries";
export default {
  data() {
    return {
      visible: false,
      nzPrice: "",
      goodsId: "",
      nzNameout: "",
      nzgg: "",
      topNum: "",
      allNum: "0.00",
      ruleForm: {
        personId: null,
        reason: null,
        remark: null,
        stockGoodsOutDetailList: [
          {
            goodsId: null,
            kcId: null,
            price: 0,
            qty: 0
          }
        ]
      },
      rules: {
        personId: [{ required: true, message: "请填出库人", trigger: "blur" }],
        reason: [{ required: true, message: "请填写出库原因", trigger: "blur" }]
      },
      excuse: [],
      options: []
    };
  },
  methods: {
    changeInput() {
      this.allNum =
        (this.ruleForm.stockGoodsOutDetailList[0].price *
          this.ruleForm.stockGoodsOutDetailList[0].qty) /
        100;
    },
    changeInput_0() {
      this.allNum =
        (this.ruleForm.stockGoodsOutDetailList[0].price *
          this.ruleForm.stockGoodsOutDetailList[0].qty) /
        100;
    },
    complete() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.btnload = true;
          this.visible = false;
          querynzOut(this.ruleForm).then(res => {
            if (res.data.code == 200) {
              this.btnload = false;
              this.$message({ type: "success", message: res.data.msg });
            } else {
              this.$message({ type: "error", message: res.data.msg });
            }
          });
        } else {
          this.btnload = false;
          return false;
        }
      });
    },
    show(stadues, row) {
      this.ruleForm = {
        personId: null,
        reason: null,
        remark: null,
        stockGoodsOutDetailList: [
          {
            goodsId: null,
            kcId: null,
            price: 0,
            qty: 0
          }
        ]
      }
      
      // console.log(this.ruleForm.stockGoodsOutDetailList[0].qty);
      this.ruleForm.stockGoodsOutDetailList[0].goodsId = row.goodsId;
      this.ruleForm.stockGoodsOutDetailList[0].kcId = row.id;
      this.ruleForm.stockGoodsOutDetailList[0].price = row.price;
      this.ruleForm.stockGoodsOutDetailList[0].qty = row.qty;
      this.visible = stadues;
      this.nzNameout = row.goodsName;
      this.nzgg = row.specs + row.meteringUnit + "/" + row.unit;
      this.topNum = row.qty;
      this.allNum =
        (this.ruleForm.stockGoodsOutDetailList[0].price *
          this.ruleForm.stockGoodsOutDetailList[0].qty) /
        100;
    // console.log(row)
      querynzOutnum().then(res => {
        this.ruleForm.outBatchCode = res.data.msg;
      });
      queryUser().then(respone => {
        this.options = respone.data.rows;
      });
      dictionariesCheck("reason").then(resp => {
        console.log(resp);
        this.excuse = resp.data.data;
      });
    },
    close() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
    }
  }
};
</script>

<style scoped>
.allTop >>> .el-dialog__header {
  background: #009865;
}
.allTop >>> .el-dialog__title {
  color: white;
  font-size: 16px;
}
.allTop >>> .el-dialog__header {
  padding: 10px 10px 10px;
}
.allTop >>> .el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
.demo-form-inline >>> .el-form-item__label {
  width: 100px;
}
</style>
